@import 'variable';
html, body {
  width: 100%;
  overflow-x: hidden;
  background-color: $color-background;
  color: $color-font;
  line-height: 1;
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body{
  margin: 0;
  padding: 0;
}


.base-width{
  max-width: 1439px;
  min-width: 1230px;
  margin: 0 auto;
  overflow: hidden;
}

.padding-global {
  padding: 8px 40px;
  box-sizing: border-box;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.click_state {
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50px;
    display: none;
    background: rgba(255, 255, 255, 0.1);
  }

  &:active::after {
    display: block;
  }
}


@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }

  25% {
    clip-path: inset(0 98% 0 0);
  }
  50% {
    clip-path: inset(98% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 98%);
  }
}
